<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<style>
    .check .check-botton {
        flex-wrap: wrap;
        justify-content: space-around;
        height: auto;
    }

    .check .check-botton p {
        width: 300px;
        display: flex;
        align-items: center;
        justify-content: right;
        margin: 20px 0;
    }

    .check .check-botton #counterpart {
        width: 140px;
        margin-right: 0;
    }

    .check .check-botton p span {
        cursor: pointer;
        width: 35px;
        text-align: center;
        line-height: 30px;
        background-color: rgb(243, 243, 243);
        border: 1px solid #999;
    }

    .check .check-botton p span:hover {
        background-color: skyblue;
        color: aqua;
    }

    .modal-content {
        border-radius: 5px;
    }

    .modal .modal-header {
        background-color: rgb(242, 242, 242);
        border-radius: 5px;
    }

    .modal .modal-body * {
        height: 34px;
        margin-right: 10px;
    }

    .modal .modal-body #staff_attr {
        width: 50px;
    }

    .modal .modal-body .table {
        margin-top: 30px;
    }

    .modal .modal-body nav {
        height: inherit;
        margin-right: 0;
    }
</style>

<body>
    <div class="container">
        <div class="header">
            <div class="h-left">
                <span class="iconfont icon-yuangong"></span> 新增客户
            </div>
            <div class="h-right">
                <a href="./connection.html" class="btn btn-info" id="preserve"><span class="iconfont icon-daoru"></span>
                    保存</a>
                <a href="./connection.html" class="btn btn-info" id="return"><span
                        class="iconfont icon-xiangzuo1"></span> 返回</a>
            </div>
        </div>
        <div class="check">
            <div class="check-middle">
                <span class="iconfont icon-rili"></span> 基本信息
            </div>
            <form class="check-botton">
                <p>客户名称：<input type="text" id="name"></p>
                <p>客户标签：<select name="" id="customer_label">
                        <option>优质客户</option>
                        <option>普通客户</option>
                        <option>目标客户</option>
                        <option>无效客户</option>
                        <option>待开发客户</option>
                        <option>需关注客户</option>
                    </select></p>

                <p>企业类型：<select name="" id="type">
                        <option>国有企业</option>
                        <option>私营企业</option>
                        <option>事业单位或社会团体</option>
                        <option>中外合资</option>
                        <option>外商独资</option>
                        <option>其他</option>
                    </select>
                </p>
                <p> 对接人：
                    <input id="counterpart" type="text" style="pointer-events: none;"><span
                        class="iconfont icon-sousuoxiao" data-toggle="modal" data-target="#addModal"></span>
                </p>
                <p>客户来源：<select name="" id="source">
                        <option>主动咨询</option>
                        <option>电话营销</option>
                        <option>客户介绍</option>
                        <option>朋友介绍</option>
                        <option>独立开发</option>
                        <option>网络搜索</option>
                        <option>广告投放</option>
                        <option>展会推广</option>
                        <option>其他途径</option>
                    </select>
                </p>

                <p> 所属地区：<input name="city" id="city" type="text"></p>

                <p>客户简介：<textarea name="" id="remarks"></textarea></p>
                <p></p>
                <p></p>
            </form>
        </div>
        <div class="check">
            <div class="check-middle">
                <span class="iconfont icon-rili"></span> 首要联系人
            </div>
            <form class="check-botton">
                <p>联系人姓名：<input type="text" id="staff_name"></p>
                <p>性别：<input id="staff_sex" type="text">
                </p>
                <p>部门：<input id="staff_department" type="text">
                </p>
                <p>职位：<input id="staff_post" type="text">
                </p>
                <p> 手机号码：
                    <input id="staff_phone" type="text">
                </p>
                <p> 电子邮箱：<input id="staff_e_mail" type="text">
                </p>
                <p>生日：<input id="staff_birthday" type="text">
                </p>
                <p>备注：<textarea id="staff_remarks" type="text"></textarea>
                </p>
                <p></p>
            </form>
        </div>
    </div>
    <!-- 添加对接人模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="addModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">选择交接人</h4>
                </div>
                <div class="modal-body">
                    <form class="check-botton">
                        <select id="staff_attr" style="text-align: center;">
                            <option value="0">姓名</option>
                            <option value="1">工号</option>
                        </select>
                        <input type="text" id="attr_val">
                        <input type="button" class="btn btn-info" value="查询" id="staff_attr_Query">
                        <input type="button" class="btn btn-info" value="重置" id="attr_val_Reset">
                    </form>
                    <table class="table table-bordered">
                        <thead class="t-head">
                            <tr>
                                <th>工号</th>
                                <th>姓名</th>
                                <th>部门</th>
                                <th>职务</th>
                            </tr>
                        </thead>
                        <tbody id="tbody-tr">

                        </tbody>
                    </table>
                    <nav aria-label="Page navigation">
                        <ul class="pagination" id="pageF" style="margin: 0; margin-top: 10px;">

                        </ul>
                    </nav>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script src="../js/jquery.js"></script>
    <script src="../data/database.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <script>
        let prestoreId = JSON.parse(localStorage.getItem('prestoreId')); //预存客户id
        let nowPage = 1; //当前页码

        function staff_sel(e) {//交接人确定
            let id = parseInt(this.dataset.id);
            console.log(e.target, this.dataset.id);
            staff.forEach(element => {
                if (element.id == id) {
                    console.log(1);
                    $('#staff_name').val(element.name);
                    $('#staff_sex').val(element.sex);
                    $('#staff_post').val(element.post);
                    $('#staff_department').val(element.department);
                    $('#staff_phone').val(element.phone);
                    $('#staff_e_mail').val(element.e_mail);
                    $('#staff_birthday').val(element.birthday);
                    $('#staff_remarks').val(element.remarks);
                    console.log($('#counterpart'));
                    $('#counterpart').val(element.name);
                }
            });
            $('#counterpart').attr('data-id', id);
        };

        //页面数据渲染；arr为渲染 数据来源（数组）a为每一页渲染几条数据，b为渲染第几页
        function pageRendering2(arr, a, b) {//员工选择框数据渲染
            a = parseInt(a);
            b = parseInt(b);
            let pageN = getPage(arr, a)//输入每页渲染几条数据,获得有几页 
            if (pageN < b) {
                b = pageN;
            }
            document.getElementById('tbody-tr').innerHTML = '';//清空列表
            if (arr.length == 0) {
                return
            }
            let fragment1 = document.createDocumentFragment();//建立文档碎片

            for (let i = (b - 1) * a; i < b * a; i++) {
                if (i > arr.length - 1) {
                    continue;
                }
                const element = arr[i];
                let str = `<td>${element.id}</td>
                    <td>${element.name}</td>
                    <td>${element.department}</td>
                    <td>${element.post}</td>
                    <td> <button type="button" class="btn btn-default staff_sel" data-dismiss="modal" data-id="${element.id}">确定</button></td>`
                let tr = document.createElement('tr');
                tr.innerHTML = str;
                fragment1.appendChild(tr);
            }//进行数据渲染
            document.getElementById('tbody-tr').appendChild(fragment1);
            pagingButtonBinding(pageN)//分页按钮绑定事件
            $('.staff_sel').on('click', staff_sel);//确定按钮绑定事件
        };

        function pagingButtonBinding(num) {//分页按钮绑定事件，num为最大页数
            $('#pageF').on('click', 'li[data-page]', function (e) {
                if (nowPage == parseInt(e.target.innerHTML)) {
                    return;
                }
                nowPage = parseInt(e.target.innerHTML);
                pageRendering(connection, 4, nowPage);
            });
            $('#pageMinus').on('click', function (e) {
                nowPage -= 1;
                if (nowPage < 1) {
                    nowPage = 1;
                    return;
                }
                pageRendering(connection, 4, nowPage)
            });
            $('#pageAdd').on('click', function (e) {
                nowPage += 1;
                if (nowPage > num) {
                    nowPage = num;
                    return;
                }
                pageRendering(connection, 4, nowPage)
            });
        }


        function getPage(arr, num) {//获取并渲染分页；arr数据源，num一页几条数据，返回页数
            let pageNum;
            let str = '';
            pageNum = parseInt(arr.length / num);//获取页数
            if (arr.length % num != 0) {
                pageNum += 1;
            }
            for (let i = 0; i < pageNum; i++) {
                str += `<li data-page="${i + 1}"><span>${i + 1}</span></li>`
            }

            $('#pageF')[0].innerHTML = ` <li id="pageMinus">
                    <span aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </span>
                </li>
               ${str}
                <li id="pageAdd">
                    <span aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </span>
                </li>`;

            return pageNum;
        }

        $('#counterpart').parent().click(function (e) {//交接人选择
            nowPage = 1;
            pageRendering2(staff, 4, nowPage);
        })

        function checkStaff() {//查询函数
            $('#attr_val_Reset').on('click', function () {//重置
                $('#sle_type').val('0');
                $('#attr_val').val('');
                pageRendering2(staff, 4, 1);
            });
            $('#staff_attr_Query').on('click', function () {//查询
                let staff_attr = $('#staff_attr').val();
                let attr_val = $.trim($('#attr_val').val());
                let arr = [];
                if (staff_attr == '0') {
                    staff.forEach(e => {
                        if (e.name == attr_val) {
                            arr.push(e)
                        }
                    })
                } else if (staff_attr == '1') {
                    staff.forEach(e => {
                        if (e.id == attr_val) {
                            arr.push(e)
                        }
                    })
                }
                pageRendering2(arr, 4, 1);
            })
        };
        checkStaff();

        $('#preserve').on('click', (e) => {//保存新增用户数据
            let id = 0;
            connection.forEach(e => {//确定新用户id
                if (e.id >= id) {
                    id = e.id;
                }
            });
            id++;
            let newConnection = {
                id: id,
                //客户名称
                name: $('#name').val(),
                //对接人
                counterpart: $('#counterpart').attr('data-id') || 0,
                //客户来源
                source: $('#source').val(),
                //客户标签
                customer_label: $('#customer_label').val(),
                //客户类型
                type: $('#type').val(),
                //客户所在城市
                city: $('#city').val(),
                //简介
                remarks: $('#remarks').val(),
                //
            }
            connection.push(newConnection);//加入客户数组
            asyncLocalStory('connection');//更新浏览器缓存
        })
    </script>
</body>

</html>